Skip to content
lib components / Text

External HTML

Use this component to add correct typographic styling to textual HTML elements. Translation keys containing HTML elements are the primary use case.

ExamplesPropertiesGuidelinesNotable Changes
import { ExternalHtml } from "@siteimprove/fancylib";

#Examples

In some cases, such as when using translation keys, it can be technically difficult or impossible to use our typography components (e.g. headings, paragraphs, or links). Instead, regular HTML elements are used, such as <h1>, <Paragraph>, or <a>. By wrapping these HTML elements in the external HTML element, they will automatically receive the same styling as that our our typography components.

#Default

Here you can see an example of how the external HTML component applies the same styling to a <Paragraph> with an <a> inside it, as that of our paragraph and link components.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet ullamcorper nunc ullamcorper fermentum. Curabitur accumsan nunc vitae pharetra dictum. Proin eu ante vel sem lobortis varius at id enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur dolor mus.

<ExternalHtml> {` <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet ullamcorper nunc ullamcorper fermentum. Curabitur accumsan nunc vitae pharetra dictum. Proin eu ante vel sem lobortis varius at id enim. Orci varius natoque penatibus et magnis dis parturient montes, <a href="#default">nascetur dolor mus</a>. </p> `} </ExternalHtml>

#Properties

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet ullamcorper nunc ullamcorper fermentum. Curabitur accumsan nunc vitae pharetra dictum. Proin eu ante vel sem lobortis varius at id enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

PropertyDescriptionDefinedValue
childrenRequired
stringHTML string that is rendered with the styling of fancy typography components
data-observe-keyOptional
stringUnique string, used by external script e.g. for event tracking
data-componentOptional
stringName of the component. Should only be set by components since it needs to stable. Used to track component usage
classNameOptional
stringCustom className that's applied to the outermost element (only intended for special cases)
styleOptional
objectStyle object to apply custom inline styles (only intended for special cases)

#Guidelines

#Best practices

  • Use when it’s technically challenging or impossible to use our typographic components (paragraph, heading, list, etc.)
  • When the external HTML component contains multiple block-level HTML elements (e.g. an <Header.h3> and a <p>), wrap it in a text container component. The text container component will automatically add the correct spacing between the typographic elements.

#Do not use when

Using our typographic components (paragraph, heading, list, etc.) presents no technical challenges.

#Accessibility

This component comes with built-in accessibility, no extra work required. However, be aware that the accessibility guidelines for our typography components, such as paragraph, heading, and link, also apply to their HTML counterparts used inside the external HTML component.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

There are no writing guidelines specifically for this component. However, the writing guidelines for our typography components, such as paragraph, heading, and link, also apply to their HTML counterparts used inside the external HTML component.

#Notable Changes

#Version 0.0.x

This component no longer has a textContainer property. Instead, the text container component should be used to add vertical spacing between block-level HTML elements.